<template>
  <div class="emrInfo-container">
    <div class="el-descriptions__header">
      <div class="el-descriptions__title">病历</div>
    </div>
    <template v-if="isNewEmr">
      <el-form>
        <el-form-item label="主诉：">
          <span>{{ pageData.mainSuit }}</span>
        </el-form-item>
        <el-form-item label="现病史：" v-if="!isReview">
          <span>{{ pageData.historyPresent }}</span>
        </el-form-item>
        <el-form-item label="既往史：" v-if="!isReview">
          <span>{{ pageData.past }}</span>
        </el-form-item>
        <el-form-item label="过敏史：" v-if="!isReview">
          <span>{{ pageData.allergy }}</span>
        </el-form-item>
        <el-form-item label="个人史：" v-if="!isReview">
          <span>{{ pageData.personal }}</span>
        </el-form-item>
        <el-form-item label="家族史：" v-if="!isReview">
          <span>{{ pageData.family }}</span>
        </el-form-item>
        <el-form-item label="实验室及辅助检查：">
          <span>{{ pageData.auxiliaryExamination }}</span>
          <ImageView v-model="pageData.auxiliaryExaminationImgUrls"></ImageView>
          <!-- auxiliaryExaminationImgUrls -->
        </el-form-item>
        <el-form-item label="体格检查：">
          <span>
            {{ pageData.signs }}
          </span>
        </el-form-item>
        <el-form-item label="治疗意见：">
          <span>{{ pageData.diagnosis }}</span>
        </el-form-item>
        <el-form-item label="中医辨证：">
          <span>{{ pageData.cnDialectical }}</span>
        </el-form-item>
        <el-form-item label="中医诊断：">
          <span>{{ pageData.cnDiagnosis }}</span>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <el-form>
        <el-form-item
          v-if="pageData.review.text !== '暂无数据'"
          label="复诊病历:"
        >
          <span>{{ pageData.review.text }}</span>
          <img
            v-for="(item, index) in pageData.review.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="主诉：">
          <span>{{ pageData.mainSuit.text }}</span>
          <img
            v-for="(item, index) in pageData.mainSuit.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="现病史：">
          <span>{{ pageData.historyPresent.text }}</span>
          <img
            v-for="(item, index) in pageData.historyPresent.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="既往史：">
          <span>{{ pageData.past.text }}</span>
          <img
            v-for="(item, index) in pageData.past.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="过敏史：">
          <span>{{ pageData.allergy.text }}</span>
          <img
            v-for="(item, index) in pageData.allergy.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="个人史：">
          <span>{{ pageData.personal.text }}</span>
          <img
            v-for="(item, index) in pageData.personal.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="家族史：">
          <span>{{ pageData.family.text }}</span>
          <img
            v-for="(item, index) in pageData.family.imgUrls"
            :key="index"
            :src="item.url"
          />
        </el-form-item>
        <el-form-item label="实验室及辅助检查：">
          <span>{{ pageData.auxiliaryExamination.text }}</span>
          <ImageView
            v-model="pageData.auxiliaryExamination.imgUrls"
          ></ImageView>
        </el-form-item>
        <el-form-item label="体格检查：">
          <span>
            {{ pageData.signs.text }}
          </span>
          <ImageView v-model="pageData.signs.imgUrls"></ImageView>
        </el-form-item>
        <el-form-item label="治疗意见：">
          <span>{{ pageData.treatmentOpinion.text }}</span>
          <ImageView v-model="pageData.treatmentOpinion.imgUrls"></ImageView>
        </el-form-item>
      </el-form>
    </template>

    <!-- footer -->
    <template v-if="isNewEmr">
      <div class="el-descriptions__header">
        <div class="el-descriptions__title">行动计划:</div>
      </div>
      <span v-for="(item, index) in pageData.actionPlan" :key="index">
        {{ item }}
      </span>
      <div class="el-descriptions__header">
        <div class="el-descriptions__title">处方:</div>
      </div>
      <el-table
        border
        :data="pageData.detailed"
        :header-cell-style="{ background: '#F5F5F5', 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <XMTableColumn label="药品名称" prop="medicineName"></XMTableColumn>
        <XMTableColumn label="剂型" prop="dosageForm"></XMTableColumn>
        <XMTableColumn label="规格" prop="spec"></XMTableColumn>
        <XMTableColumn label="用量" prop="singleDosage"></XMTableColumn>
        <XMTableColumn label="频次" prop="frequency"></XMTableColumn>
        <XMTableColumn label="用法" prop="usage"></XMTableColumn>
        <XMTableColumn label="发药总量" prop="doseTotal"></XMTableColumn>
      </el-table>
      <el-form>
        <el-form-item label="其他治疗方案：">
          <span>{{ pageData.treatmentPlan }}</span>
        </el-form-item>
        <el-form-item label="附加治疗方案（生物制剂）：">
          <span>{{ pageData.addTreatmentPlan }}</span>
        </el-form-item>
        <el-form-item label="脱敏治疗：">
          <span>{{ pageData.desensitizationTreatment }}</span>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>
<script>
  import { computed } from '@vue/runtime-core'
  import ImageView from '../../../components/ImageView/index.vue'
  export default {
    name: 'emrInfo',
    props: { modelValue: Object, isReview: Boolean },
    setup(props) {
      // 主诉 现病史 既往史 过敏史 个人史 家族史 实验室及辅助检查 体格检查(signs?) 治疗意见
      const dics = [
        'review',
        'mainSuit',
        'historyPresent',
        'past',
        'allergy',
        'personal',
        'family',
        'auxiliaryExamination',
        'signs',
        'treatmentOpinion',
        'diagnosis',
        'cnDialectical',

        'cnDiagnosis',
      ]
      // TODO oss 图片需要getAuthorizedImgUrl 鉴权/外网 1. 关闭鉴权 2. 一个不会失效的token
      const pageData = computed(() => {
        console.log('props.modelValue =' + JSON.stringify(props.modelValue))
        const data = {}
        dics.forEach((item) => {
          const tmp = props.modelValue[item]
          if (props.modelValue.xiaomanNewEmrType === 'oldEmr') {
            data[item] = tmp ? tmp : { text: '暂无数据。' }
          } else {
            data[item] = tmp ? tmp : '暂无数据。'
          }
        })
        const { detailed, actionPlanDto, imgUrl } = props.modelValue
        if (imgUrl) {
          // data['auxiliaryExaminationImgUrls'] = JSON.parse(imgUrl)

          const imgUrls = JSON.parse(imgUrl)
          try {
            if (
              imgUrls.length > 0 &&
              imgUrls[0].url &&
              Array.isArray(JSON.parse(imgUrls[0].url))
            ) {
              let tmp = []
              imgUrls.forEach((item) => {
                const { name, url } = item
                tmp = tmp.concat(JSON.parse(url))
              })
              data['auxiliaryExaminationImgUrls'] = tmp
            }
          } catch (error) {
            data['auxiliaryExaminationImgUrls'] = imgUrls
          }
        }

        data['detailed'] = detailed ? detailed : []
        if (actionPlanDto) {
          const {
            treatmentPlan,
            addTreatmentPlan,
            desensitizationTreatment,
            drugs,
          } = actionPlanDto
          data['actionPlan'] = drugs ? drugs : []
          data['treatmentPlan'] = treatmentPlan ? treatmentPlan : '暂无数据。'
          data['addTreatmentPlan'] = addTreatmentPlan
            ? addTreatmentPlan
            : '暂无数据。'
          data['desensitizationTreatment'] = desensitizationTreatment
            ? desensitizationTreatment
            : '暂无数据。'
        }
        return data
      })
      const isNewEmr = computed(() => {
        if (props.modelValue.xiaomanNewEmrType === 'oldEmr') {
          return false
        }
        return true
      })
      return {
        pageData,
        isNewEmr,
      }
    },
    components: { ImageView },
  }
</script>
<style lang="scss" scoped>
  .emrInfo-container {
    padding: 0 11px;

    :deep(.el-form-item) {
      margin-bottom: 11px;
    }

    span {
      color: #606266;
      display: block;
    }
  }
</style>
